<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css笔记</title>
        <!--内部样式是:在head标签里写<style></style>-->
        <style>
            h1{
                color: red;
                font-size: 20px;
            }
            .class1{
                color: blue;
                font-size: 20px;
            }
            .class2{
                color: yellow;
                font-size: 20px;
                background-color: yellowgreen;
            }
            .class3{
                background-color: blueviolet;
            }
            #text{
                color: green;
                font-size: 36px;
            }
            .t1,.t2{
                background-color: blueviolet;
            }
            
            table{
                border-collapse:collapse;
            }

            table, td{
                border:1px solid black;
            }
            
            .flex-container{/* 弹性容器 */
                width: 300px;
                height: 300px;
                background-color: lightgrey;

                display:flex;
                flex-direction:column;
                justify-content:flex-start;
                align-items:center;
            }
            .flex-item1{ /* 弹性子元素 */
                width: 100px;
                height: 100px;
                background-color: green;
                flex-grow: 2;
            }
            .flex-item2{ /* 弹性子元素 */
                width: 100px;
                height: 100px;
                background-color: blue;
                flex-grow: 1;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css1.css">
        <!--外部样式是在head标签里写link标签，加上rel是style脚本，type是css文本，href是外部文件的地址【文件结尾是[.css]】-->
    </head>
    <body>
        <!--第一部分：css构成与引用-->

        <!--css由两部分组成：选择器、一条或多条声明（样式）-->
        <!--
            选择器通常是需要改变样式的html元素，如h1在style里设置样式
            特点如下：
            1、无论选择器嵌套或者放的多深，一定会被选择上
            2、所有标签都可以是选择器
            3、选择的是所有，而不是一个
        -->
        <!--css分为:内联样式、内部样式、外部样式-->
        <p style="background-color: blue;font-size: 25px;">css层叠样式表又叫级联样式表</p>
        <!--
            内联样式：在标签里加上style属性
            <p style="background-color: blue;font-size: 25px;">内联样式</p>
        -->
        <!--
            内部样式是:在head标签里写<style></style>
            <head>
                <style>
                    *{
                        color: red;
                        font-size: 20px;
                    }
                    h1{
                        color: red;
                        font-size: 20px;
                    }
                </style>
            </head>
            上面【*】代表所有html元素，【h1】只代表h1标签
        -->
        <!--
            外部样式是在head标签里写link标签，
            rel是style脚本，type是css文本，href是外部文件的地址
            <head>
                <link rel="stylesheet" type="text/css" href="css1.css">
            </head>
        -->
        <h1 style="background-color:green;">css层叠样式表又叫级联样式表</h1>
        <h2>css展示2</h1>

        
        <!--第二部分：css的选择器-->
        <!--
            A、标签选择器，标签元素当作名称，无论放在html的哪里，html内所有的这个标签都会使用选择器
            B、类选择器：优点是灵活，
                1、类选择器可以被多种标签使用，好几个标签都可以使用同一个选择器
                2、类名【不能是数字开头】
                3、同一个标签可以用多个选择器，如【class="class1 class3"】
            C、ID选择器：
                1、ID是唯一的，只能使用一次
                2、ID不能用数字开头
            D、全局选择器：【*】代表所有选择器
        -->
        <!--
            标签选择器的名字 就是 标签元素本身
            类选择器是【.】加上类名
            ID选择器是【#】加上类名
            合并选择器，用【,】隔开 两个选择器。
            <head>
                <style>
                    *{  【全局选择器】
                        font-size: 20px;
                    }
                    p{  【标签元素，标签选择器】
                        color: blue;
                        font-size: 20px;
                    }
                    h1{ 【标签元素，标签选择器】
                        color: red;
                        font-size: 20px;
                    }
                    .class1{  【开头加了点{.}，是类选择器】
                        color: blue;
                        font-size: 20px;
                    }
                    .class2{
                        color: blue;
                        font-size: 20px;
                    }
                    #text{  【开头加了点{#}，是类选择器】
                        color: blue;
                        font-size: 36px;
                    }
                    .t1,.t2{
                        background-color: blueviolet;
                    }
                </style>
            </head>
        -->
        <h1>标签选择器</h1>
        <p class="class1">p标签，类选择器1</p>
        <p class="class1">第二个类选择器1，<span class="class2">多个选择器使用</span></p>
        <span class="class1">span标签选择器，多种选择器使用</span>
        <p class="class2">p标签，类选择器2，多个选择器使用</p>
        <p class="class1 class3">两个选择器</p>
        <p id="text">id选择器</p>


        
        <!--第三部分：选择器优先级
            全局选择器：*
            元素选择器：标签名（如p、h1、h2、span、div）
            类选择器：【.】+【class属性名】
            ID选择器：【#】+【ID属性名】
            行内样式：标签属性style="background-color:green;"  在双引号内添加定义
            
            优先级：
                行内样式 > ID选择器 > 类选择器 > 元素选择器 > 全局选择器
            也可以说选择器越具体，优先级越高

            优先级高的 会把 优先级低的 覆盖，但是 没有的 会从优先级低的补充上去
        -->

        
        <!--第四部分：css定义文本的字体、颜色、大小、加粗、字体样式

            1、color    指定一个元素的颜色
                div{color:red;}         单词
                div{color:#ff0000;}     十六进制
                div{color:rgb(255,0,0);}    颜色通道
                div{color:rbga(255,0,0,.5);}  【255,0,0】是颜色，【0.5】是半透明，【0-1】是 完全透明 到 完全不透明

            2、font-size    指定一个元素的大小
                div{font-size:20px;}
                h1{font-size:36px;}
                a{font-size:80px;}
                chrome浏览器能接受的最小字体是12px

            3、font-weight    指定一个元素的文本粗细
                【normal，默认效果】
                【bold，定义粗体字符】
                【bolder，定义更粗的字符】
                【lighter，定义更细的字符】
                【100-900，定义从粗到细 400是默认，700等于bold】
                div{font-weight:normal;}
                h1{font-weight:lighter;}
                a{font-weight:900;}

            4、font-style    指定一个元素的字体样式
                【normal，默认值】
                【italic，定义斜体字】

            5、font-family    指定一个元素的字体
                每个值用逗号隔开，
                如果字体名称必须带着空格，它必须加上双引号
                font-family:"Microsoft YaHei","Simsun","SimHei";
        -->
        
        <!--第五部分：背景属性
            【background-color，设置背景的颜色】
            【background-image，设置背景的图片】
            【background-position，设置背景图片显示位置】
            【background-repeat，设置背景图片如何填充】
            【background-size，设置背景图片大小属性】

            【background-color，设置背景的颜色】
            div{
                width:300px;
                height:300px;
                background-color:red;
            }
                
            【background-image，设置背景的图片】
            div{
                width:300px;
                height:300px;
                background-image:url("/pic/code_test.jpg");
            }
                
            【background-repeat，设置背景图片如何填充】
                [repeat，默认值]
                [repeat-x，水平方向平铺]
                [repeat-y，垂直方向平铺]
                [no-repeat，不平铺]
            div{
                width:300px;
                height:300px;
                background-image:url("/pic/code_test.jpg");
                background-repeat:no-repeat;
            }
                
            【background-size，设置背景图片大小属性】
                [length,设置背景图片的宽度和高度，第一个值宽度，第二个值高度，只设置一个那么另一个默认auto]
                [percentage,计算相对位置区域的百分比，第一个值宽度，第二个值高度，只设置一个那么另一个默认auto]
                [cover,保持图片纵横比并将图片缩放成‘完全覆盖背景区域’的‘最小‘的大小]
                [contain,保持图片纵横比并将图片缩放成‘适合背景定位区域’的‘最大‘的大小]
            
            【background-position，设置背景图片显示位置】
            有两个属性[水平（左中右），垂直（上中下）]
                    [left|center|right，top|center|bottom]水平（左中右），垂直（上中下）
                    [x%,y%] 水平、垂直，左上角0% 0%，右下角100% 100%，只写了一个值那么另一个默认是50%，都不写那么默认0% 0%
                    [x pos,y pos]两个值的单位是像素
            div{
                width:300px;
                height:300px;
                background-image:url("/pic/code_test.jpg");
                background-position:left top;左上角（0% 0%|0px 0px）
            }
        -->

        <!--第五部分：文本属性  4个知识点
            text-align:left|center|right（左中右）文本对齐方向
            h1{text-align:left|center|right}

            text-decoration:overline|line-through|underline  上划线|中划线（删除线）|下划线
            h1{text-decoration:overline|line-through|underline}

            text-transform:capitalize|uppercase|lowercase（开头大写|全部大写|全部小写）
            h1{text-transform:capitalize|uppercase|lowercase}

            text-indent:50px（首行文本缩进）
            h1{text-indent:60px}
        -->
        <p style="text-decoration: line-through;">asdhlkasdfl</p>
        <p style="text-transform: lowercase;">uppercase设置英文大小写</p>

        
        <!--第六部分：表格属性  
            表格边框
            指定css表格边框，使用border属性
                table, td{
                    border:1px solid black;  # 大小，粗细，颜色
                }

            折叠边框
            border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
                table{border-collapse:collapse;}
                table, td{border:1px solid black;}  # 大小，粗细，颜色
                
            表格的宽度和高度
                width、height
            table{width:100%;}
            td{height:50px;}

            对齐 默认的是居中
                text-align水平对齐属性
            td{text-align:left|center|right;}
                垂直对齐属性
            td{height:50px; vertical-align:top|center|bottom;}

            表格填充
            如果在表的内容中控制空格之间的边框，应该使用tr和th元素的填充属性
            tr, th, td{padding:15px;}

            表格颜色设置
            table td th{border:1px solid black;}
            td{background-color:green; color:blue;}  # 背景颜色background-color和文本颜色color

        -->
        <table>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </table>

        <!--第七部分：关系选择器  4个知识点
            后代选择器
                选择所有被E包含的F元素，中间用空格隔开
                E F{选择器内容}

                ul li{color:red;}在ul/li会生效，就算是ul/div/ul/li那么这个li也会变red红色

            子代选择器
                选择E元素直接子元素F，对更深一层元素不管用
                E>F{选择器内容}

                ul>li{color:red;}只有ul/li才会有影响变red红色

            相邻兄弟选择器
                选择紧跟E元素后的F原色，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
                E+F{选择器内容}

                h3+p{color:red;}必须是h3还有往下的第一个p会变red红色
                <h3>h3元素生效</h3>
                <p>第一个p元素生效</p>
                <p>第二个p元素没有生效</p>

            通用兄弟选择器
                选择E元素之后的所有兄弟元素，作用于多个元素，用~隔开
                E~F{选择器内容}
                h3+p{color:red;}
                <h3>h3元素生效</h3>
                <p>第一个p元素生效</p>
                <p>第二个p元素生效</p>
        -->

        

        <!--第八部分：css盒子模型
            css盒子模型本质是一个盒子，封装周围的HTML元素
            它有四个部分：外边距(margin)、边框(border)、内边距(padding)、文本(content)

            外边距(margin)，清除边框外的区域，外边距是透明的
            边框(border)，围绕内边距和内容外的边框
            内边距(padding)，清楚内容周围的区域，内边距是透明的
            文本(content)，盒子的内容，显示文本和图像

            外边距和内边距都有：左、右、顶部、底部
            margin-left、margin-right、margin-top、margin-bottom
            padding-left、padding-right、padding-top、padding-bottom

            ——————————————其他的东西———————————————————
            |   外边距(margin)                        |
            |                                         |
            |    ——————边框(border)————————————       |
            |   |    内边距                    |      |
            |   |         文本(content)        |      |
            |   |                              |      |
            |   ————————————————————————————————      |
            —————————————其他的东西————————————————————
        -->

        
        <!--第九部分：弹性盒子模型
            弹性盒子模型是css3的一种新的布局模式
            css3弹性盒子模型是一种当前页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
            
            弹性盒子模型：对一个容器中的子元素进行排列、对齐和分配空白空间
            弹性盒子模型由弹性容器(父元素)和弹性子元素组成
            
            弹性容器(父元素)的属性
            A、【display:flex;】开启弹性盒，属性设置后默认子元素为水平排列

            B、【flex-direction:row|row-reverse|column|column-reverse;】指定了弹性子元素在弹性容器(父元素)中的位置

            如果3个盒子依次是：a，b，c
            row横向（从左到右）排列，默认的排序方式【左边界a,b,c    右边界】
            row-reverse反转横向排列（从右到左），从后往前排序，最后一项排在最前面【左边界    c,b,a右边界】
            column纵向排列【上边界a,b,c    下边界】
            column-reverse反转纵向排列，从后往前排序，最后一项排在最上面【上边界     c,b,a下边界】

            C、【justify-content:flex-start|flex-end|center;】弹性项目按照 flex-direction的方向 对准 起始边界|结束边界|居中 紧挨着填充
            D、【align-items:flex-start|flex-end|center;】弹性项目按照 flex-direction的垂直轴方向 对准 起始边界|结束边界|居中 放置

            弹性子元素的属性
            flex-grow/flex根据盒子元素所设置的扩展因子作为比率来分配剩余空间，即按所有子元素的权重进行分配
            flex-item1的【2】加上flex-item2的【1】，flex-item1占【2/3】，flex-item2占【1/3】
                            
            .flex-container{/* 弹性容器 */
                width: 300px;
                height: 300px;
                background-color: lightgrey;

                display:flex;/* 定义弹性容器 */
                flex-direction:column;/* 定义弹性容器的主轴是横向(row)还是垂直(column) */
                justify-content:flex-start;
                align-items:center;
            }
            .flex-item1{ /* 弹性子元素 */
                width: 100px;
                height: 100px;
                background-color: green;
                flex-grow: 2;
            }
            .flex-item2{ /* 弹性子元素 */
                width: 100px;
                height: 100px;
                background-color: blue;
                flex-grow: 1;
            }
        -->
        <div class="flex-container">
            <div class="flex-item1"></div>
            <div class="flex-item2"></div>
        </div>
        
        <!--第十部分：文档流
            文档流是文档中可显示元素在排列时所占用的位置/空间
            高矮不齐、底边对齐
            无论多少空格、换行、tab都会变为一个空格
            两个img换行会让两个图片有一个空隙，两个img挨着写会没有空隙

            内联元素和块级元素放一起：会出现高矮不齐、底边对齐

            <img src="" alt="">
            <img src="" alt="">
            两个图片不在在同一行，中间有空隙
            
            <img src="" alt=""><img src="" alt="">
            两个图片在同一行，中间没有空隙

            如何解决上述文档流问题：浮动、绝对固定、相对固定
        -->

        <!--第十一部分：浮动
            通过float属性，定义元素向哪个方向浮动【left向左浮动，right向右浮动】
            浮动的特点：1、浮动以后脱离文档流。2、浮动只有左右，没有上下。

            相当于页面上添加了新的一层浮层来放置元素，
            结果如：浮动的div1会在普通的div2上面覆盖显示，两个img设置float浮动会让两个图片的间隙消失，ul的li设置浮动会导致li都在同一行

            当容器不足以横向摆放，会在下一行摆放
        -->
        <img src="" alt="">
    </body>
</html>